fix(MainNavigationBar): allow right slot to expand by AlexandraGallipoliRodrigues · Pull Request #1546 · Telefonica/mistica-web

AlexandraGallipoliRodrigues · 2026-05-06T07:54:07Z

ticket: https://jira.tid.es/browse/WEB-2439
figma: https://www.figma.com/design/HA6UnnWC187IL1YujMYlYZ/Main-Navigation-Bar?node-id=2412-5583

Inline expand prop: allows you to specify which Inline child should occupy the remaining space.

bug:

fix, local playroom:

…nside Inline

github-actions · 2026-05-06T07:56:43Z

Size stats

	master	this branch	diff
Total JS	16.1 MB	16.1 MB	+1.28 kB
JS without icons	2.01 MB	2.01 MB	+1.24 kB
Lib overhead	92.5 kB	92.5 kB	0 B
Lib overhead (gzip)	19.9 kB	19.9 kB	0 B

github-actions · 2026-05-06T07:59:59Z

Deploy preview for mistica-web ready!

Project:	`mistica-web`
Status:	✅ Deploy successful!
Preview URL:	https://mistica-iqcr846ee-flows-projects-65bb050e.vercel.app
Latest Commit:	`9656fd7`

Deployed with vercel-action

github-actions · 2026-05-06T08:03:23Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

Copilot

Pull request overview

This PR fixes layout limitations in MainNavigationBar/NavigationBar right content so the right slot can properly expand when the provided right element is intended to be full-width, and introduces a new InlineItem API to allow individual inline children to opt into flex-grow behavior.

Changes:

Wrap right content in NavigationBarContentContainer when expandRightContent is enabled and the right element has fullWidth, plus add supporting CSS to allow correct shrinking/expansion.
Add InlineItem with grow support so specific Inline children can expand, and switch Inline rendering to inspect children for grow items.
Re-export InlineItem from the library entrypoint.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/navigation-bar.tsx	Conditionally wraps right slot content to allow full-width expansion when requested.
src/navigation-bar.css.ts	Tweaks expanded right-slot sizing and adds a wrapper style for full-width content.
src/inline.tsx	Adds `InlineItem` API and updates child rendering to support `grow` items.
src/inline.css.ts	Adds flex container and grow-item styles needed for the new `InlineItem` behavior.
src/index.tsx	Exposes `InlineItem` from the public package API.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+
+                return (
                    <div
+                        key={index}


Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated no new comments.

yceballost · 2026-05-06T22:31:49Z

I dont feel really easy in terms of devExp to have another component called InlineItem to manage this kind of things

Is not there any other solution? maybe manage this property in the <Inline> component?

wdyt @atabel ?

Good point, thanks! I’ve removed the public InlineItem component and moved the behavior into Inline via a growItems prop

… growItems prop

…OBVIVO-3456-fix-MainNavigationBar-allow-right-slot-to-expand

github-actions · 2026-05-07T14:10:38Z

Size stats

	master	this branch	diff
Total JS	16.1 MB	16.1 MB	+325 B
JS without icons	2.02 MB	2.02 MB	+325 B
Lib overhead	92.5 kB	92.5 kB	0 B
Lib overhead (gzip)	19.9 kB	19.9 kB	0 B

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

+                hasGrowItem && styles.flexLayout,
                isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline


…OBVIVO-3456-fix-MainNavigationBar-allow-right-slot-to-expand

…ow-right-slot-to-expand

Copilot

Pull request overview

Copilot reviewed 8 out of 10 changed files in this pull request and generated no new comments.

github-actions · 2026-05-11T10:58:10Z

Screenshot tests report

✔️ All passing

…ow-right-slot-to-expand

Marcosld · 2026-05-11T14:57:18Z

 ]);

+export const navigationBarContentRightExpandedContent = style({
+    width: '100%',


What about an expand prop on the Inline element? It would set its width to 100% whenever it is set. This way we wouldn't have to modify navigation bar I think. This prop could accept what you currently have in flexGrow prop and wouldn't need fullWidth to be set.

…navigation-bar

Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 2 comments.

+    const childrenArray = React.Children.toArray(children).filter((child) => !!child || child === 0);
+
+    const hasExpandItem = childrenArray.some((_, index) => shouldExpandItem(expand, index));
+    const shouldExpand = expand !== undefined;

    return (
        <div
            className={classnames(
                className,
                styles.inline,
-                wrap ? styles.wrap : fullWidth ? styles.fullWidth : styles.noFullWidth,
-                isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline
+                wrap ? styles.wrap : fullWidth || shouldExpand ? styles.fullWidth : styles.noFullWidth,
+                isStringSpace
+                    ? wrap
+                        ? styles.stringSpaceWithWrap
+                        : styles.stringSpace
+                    : styles.marginInline,
+                shouldExpand && styles.expand
            )}


    dataAttributes?: DataAttributes;
    wrap?: boolean;
+    /**
+     * Index or indexes of the children that should grow to fill the available space.


Marcosld · 2026-05-13T08:07:32Z

    const {isDesktopOrBigger} = useScreenSize();

+    const right = expandedRightSlot ? (
+        <Inline fullWidth space={16} alignItems="center" expand={0}>


I think we can skip fullWidth prop here, right?

Marcosld · 2026-05-13T08:09:05Z

+
+export const expandItem = style({
+    flex: 1,
+    minWidth: 0,


why the minWidth?

minWidth: 0 was intentional here. In a flex layout, flex items have min-width: auto by default, so an expanded item can refuse to shrink below its content size and push adjacent items out of the available space. Setting minWidth: 0 allows the expanded item to shrink properly and lets inner components handle truncation/overflow... But i haven't been able to prove this case in a playroom, should I delete the minWidth then?

Hmm I don't know if that behaviour is desirable, perhaps we could live without it for the moment...
https://developer.mozilla.org/en-US/play?id=pEK8gpiRaKCWYKNxPpXPkgOoAEQy8NkIAdjrAPjKL0gP%2BAzWTL%2FLoG9rA2WXLAksvUN8leTXOzoc46Dg

Marcosld · 2026-05-13T08:15:27Z

+            {childrenArray.map((child, index) => {
+                return (
                    <div
+                        key={getChildKey(child, index)}


I would use React.Children.map because key logic is handled automatically:

Marcosld · 2026-05-13T08:17:46Z

 }: Props): JSX.Element => {
    const {platformOverrides} = useTheme();
    const isStringSpace = typeof space === 'string';
+    const childrenArray = React.Children.toArray(children).filter((child) => !!child || child === 0);


According to the doc react filters empty elements:

Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 1 comment.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 2 comments.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

added !wrap Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 2 comments.

+     * Indexes refer to entries in `React.Children.toArray(children)`, so empty nodes
+     * (`null`, `undefined` and booleans) are ignored, but React elements still count
+     * even if they ultimately render no content. Expanded children must render content
+     * to produce a visible expanded item.


                className,
                styles.inline,
-                wrap ? styles.wrap : fullWidth ? styles.fullWidth : styles.noFullWidth,
-                isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline
+                wrap ? styles.wrap : fullWidth || hasExpandItem ? styles.fullWidth : styles.noFullWidth,
+                isStringSpace
+                    ? wrap
+                        ? styles.stringSpaceWithWrap
+                        : styles.stringSpace
+                    : styles.marginInline,
+                hasExpandItem && !wrap && styles.expand
            )}


Copilot

Pull request overview

Copilot reviewed 6 out of 8 changed files in this pull request and generated 3 comments.

+    const childrenArray = React.Children.toArray(children).filter((child) => child !== '');

+    const hasExpandItem = childrenArray.some((_, index) => shouldExpandItem(expand, index));
+    const shouldExpand = hasExpandItem && !wrap;


+    /**
+     * Index or indexes of the children that should grow to fill the available space.
+     * Indexes refer to entries in `React.Children.toArray(children)`, so empty nodes
+     * (`null`, `undefined` and booleans) are ignored, but React elements still count
+     * even if they ultimately render no content.
+     *
+     * This prop has no effect when `wrap` is enabled.
+     */
+    expand?: number | ReadonlyArray<number>;


+});
+
+export const expandItem = style({
+    flex: 1,


AlexandraGallipoliRodrigues added 2 commits May 6, 2026 09:47

Allow MainNavigationBar right prop to expand

558f9f0

Add InlineItem grow support to let children consume available space i…

83de53e

…nside Inline

AlexandraGallipoliRodrigues requested review from atabel, ieduardogf and yceballost May 6, 2026 07:54

AlexandraGallipoliRodrigues marked this pull request as ready for review May 6, 2026 10:10

Copilot AI review requested due to automatic review settings May 6, 2026 10:10

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 6, 2026 10:11 View session

Copilot AI reviewed May 6, 2026

View reviewed changes

Comment thread src/inline.tsx Outdated

Comment on lines +133 to +136

return (

<div

key={index}

AlexandraGallipoliRodrigues added 2 commits May 6, 2026 13:06

preserve child keys in wrapped items

a31e7a9

added screenshot test

e2855d0

Copilot AI review requested due to automatic review settings May 6, 2026 11:29

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 6, 2026 11:30 View session

Copilot AI reviewed May 6, 2026

View reviewed changes

yceballost reviewed May 6, 2026

View reviewed changes

AlexandraGallipoliRodrigues added 2 commits May 7, 2026 16:06

removed InlineItem component and moved the behavior into Inline via a…

fde438a

… growItems prop

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/…

0448ee9

…OBVIVO-3456-fix-MainNavigationBar-allow-right-slot-to-expand

Copilot AI review requested due to automatic review settings May 7, 2026 14:06

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 7, 2026 14:07 View session

Copilot AI reviewed May 7, 2026

View reviewed changes

Comment thread src/inline.tsx Outdated

Comment on lines 127 to 128

hasGrowItem && styles.flexLayout,

isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline

AlexandraGallipoliRodrigues requested a review from yceballost May 7, 2026 16:39

AlexandraGallipoliRodrigues added 4 commits May 8, 2026 09:04

move flexLayout after spacing classes

3fe8a3b

Merge branch 'master' of github.com:Telefonica/mistica-web into alex/…

05ae75b

…OBVIVO-3456-fix-MainNavigationBar-allow-right-slot-to-expand

WEB-2439: empty commit, link PR to ticket

b0ad52f

Merge branch 'master' into alex/OBVIVO-3456-fix-MainNavigationBar-all…

f7a9b3f

…ow-right-slot-to-expand

Copilot AI review requested due to automatic review settings May 8, 2026 07:49

Copilot AI review requested due to automatic review settings May 11, 2026 10:43

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 11, 2026 10:44 View session

Copilot AI reviewed May 11, 2026

View reviewed changes

Merge branch 'master' into alex/OBVIVO-3456-fix-MainNavigationBar-all…

dab18bb

…ow-right-slot-to-expand

Marcosld reviewed May 11, 2026

View reviewed changes

PR changes: rename growItem for expand prop and undo changes at main-…

c0b9c88

…navigation-bar

Copilot AI review requested due to automatic review settings May 12, 2026 10:43

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 12, 2026 10:44 View session

AlexandraGallipoliRodrigues requested a review from Marcosld May 12, 2026 10:46

Copilot AI reviewed May 12, 2026

View reviewed changes

minor changes

06bd1c4

Marcosld approved these changes May 13, 2026

View reviewed changes

PR changes: use React.Children.map and deleted filter

327e2ca

Copilot AI review requested due to automatic review settings May 13, 2026 09:53

Copilot AI reviewed May 13, 2026

View reviewed changes

Comment thread src/inline.tsx Outdated

Potential fix for pull request finding

6c254fe

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings May 13, 2026 10:01

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 13, 2026 10:02 View session

Copilot AI reviewed May 13, 2026

View reviewed changes

Comment thread src/inline.tsx Outdated

Comment thread src/inline.tsx Outdated

filter out empty strings ('')

1249a1e

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings May 13, 2026 10:34

Potential fix for pull request finding

c8b3750

added !wrap Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 13, 2026 10:35 View session

Copilot AI reviewed May 13, 2026

View reviewed changes

AlexandraGallipoliRodrigues added 2 commits May 13, 2026 13:37

deleted minWidth

08379e9

handle Inline expand only in non-wrapping layouts

9656fd7

Copilot AI review requested due to automatic review settings May 14, 2026 07:07

Copilot started reviewing on behalf of AlexandraGallipoliRodrigues May 14, 2026 07:08 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

		hasGrowItem && styles.flexLayout,
		isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline

Conversation

AlexandraGallipoliRodrigues commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

yceballost May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexandraGallipoliRodrigues May 7, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

github-actions Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Marcosld May 11, 2026

Choose a reason for hiding this comment

Uh oh!

AlexandraGallipoliRodrigues May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Marcosld May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Marcosld May 13, 2026

Choose a reason for hiding this comment

Uh oh!

AlexandraGallipoliRodrigues May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Marcosld May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Marcosld May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Marcosld May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

AlexandraGallipoliRodrigues commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading

yceballost May 6, 2026 •

edited

Loading

github-actions Bot commented May 7, 2026 •

edited

Loading

github-actions Bot commented May 11, 2026 •

edited

Loading

AlexandraGallipoliRodrigues May 12, 2026 •

edited

Loading

AlexandraGallipoliRodrigues May 13, 2026 •

edited

Loading